<template>
  <div class="cloumn-wrap">
    <div class="particulars">
      <span>{{detail.name}}</span>
      <span>{{detail.num}}</span>
    </div>
    <div class="jdt-wrap">
      <el-progress
        :text-inside="true"
        :stroke-width="15"
        :percentage="40"
        :format="setItemText()"
      >

      </el-progress>
      <span class="jdt-point" :style="{position: 'fixed',left: (point.x + 'px'),top: (point.y + 'px')}"></span>
    </div>
    <div :id="id" style="height: calc(100% - 50px);"></div>
  </div>
</template>
<script>
    export default {
        props: ['id', 'detail'],
        data () {
            return {
              point: {
                  x: 0,
                  y: 0,
              }
            }
        },
        methods: {
            setItemText () {
                return () =>{
                    return '1'
                }
            },
            initEchart () {
                let echarts = this.$echarts
                const offsetX = 8;
                const offsetY = 3;
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint;
                        // console.log(shape);
                        const c0 = [shape.x, shape.y];
                        const c1 = [shape.x - offsetX, shape.y - offsetY];
                        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                        const c3 = [xAxisPoint[0], xAxisPoint[1]];
                        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                    },
                });
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c1 = [shape.x, shape.y];
                        const c2 = [xAxisPoint[0], xAxisPoint[1]];
                        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                        const c4 = [shape.x + offsetX, shape.y - offsetY];
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    },
                });
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y];
                        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                        const c3 = [shape.x, shape.y - offsetX];
                        const c4 = [shape.x - offsetX, shape.y - offsetY];
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    },
                });
                // 注册三个面图形
                echarts.graphic.registerShape('CubeLeft', CubeLeft);
                echarts.graphic.registerShape('CubeRight', CubeRight);
                echarts.graphic.registerShape('CubeTop', CubeTop);
                const VALUE = [100, 200, 300, 400, 300, 340, 150];
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                        formatter: function (params, ticket, callback) {
                            const item = params[1];
                            return item.name + ' : ' + item.value;
                        },
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '20%',
                        bottom: '5%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: ['大通区', '南新区', '1003', '1004', '1005', '1006', '1007'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: '#385065',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 2,
                                color: '#2B7BD6',
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#153D7D',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                            fontSize: 14,
                        },
                        // boundaryGap: ['20%', '20%'],
                    },
                    series: [
                        {
                            type: 'custom',
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: 'group',
                                    children: [
                                        {
                                            type: 'CubeLeft',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#33BCEB',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#337CEB',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeRight',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#28A2CE',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#1A57B7',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeTop',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#43C4F1',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#28A2CE',
                                                    },
                                                ]),
                                            },
                                        },
                                    ],
                                };
                            },
                            data: VALUE,
                        },
                        {
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: (e) => {
                                        // return e.value + '次';
                                        return e.value;
                                        /*console.log(e)
                                        switch (e.name) {
                                            case '1001':
                                                return e.value;
                                            case '1002':
                                                return VALUE[1];
                                            case '1003':
                                                return VALUE[2];
                                        }*/
                                    },
                                    fontSize: 16,
                                    color: '#43C4F1',
                                    offset: [0, -5],
                                },
                            },
                            itemStyle: {
                                color: 'transparent',
                            },
                            tooltip: {},
                            data: VALUE,
                        },
                    ],
                };
                let myChart = this.$echarts.init(document.getElementById(this.id))
                myChart.setOption(option)
            }
        },
        mounted() {
            this.initEchart()
            const wrap = document.querySelectorAll('.cloumn-wrap')
            let thisDom = null
            wrap.forEach((v)=>{
                for(let i in v.children){
                    if(v.children[i].id === this.id){
                        thisDom = v
                        break
                    }
                }
            })
            let pro = thisDom.querySelector('.el-progress-bar__innerText')
            this.point.x = pro.getBoundingClientRect().left
            this.point.y = pro.getBoundingClientRect().top
        }
    }
</script>
<style lang="stylus">
  .cloumn-wrap{
    height: 33.33%;
    padding: 0 10px;
    .el-progress-bar{
      .el-progress-bar__outer{
        height: 4px!important;
        background-color: transparent;
      }
      .el-progress-bar__inner{
        background: linear-gradient(to right, transparent, #e3c765)!important;

      }
    }
    .particulars{
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }
    .jdt-wrap{
      margin-bottom: 10px;
      .jdt-point{
        display: inline-block;
        width:12px;
        height: 12px;
        border-radius: 50%;
        background: #f6ff8d;
        transform: translate(-2px, -8px);
        box-shadow: 0 0 15px 2px #f6ff8d;
      }
    }
  }
</style>
